<script>
import { reactive, toRefs, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Toast, Dialog } from "vant";
import "vant/es/dialog/style";
export default {
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  setup() {
    // const codes = ref(false);
    let route = useRoute();
    let router = useRouter();
    // console.log(route.query);
    const mybag = reactive({
      myid: route.query.id,
      show: false,
      flag: false,
      active: 0,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      currentDate2: new Date(),
      textlist: [],
      text: false,
      userInfo: [],
      codes: false,
      shows: false,
      flager: true,
      allflag: false,
      scLists: null,
    });
    const look = () => {
      mybag.codes = !mybag.codes;
    };
    //数字过滤
    const playCountNum = (value) => {
      let w = value > 10000 ? (value / 10000).toFixed(1) + "万" : value;
      return w;
    };
    const checked = (item) => {
      item.checked = !item.checked;
    };
    const chekclear = () => {
      mybag.scLists = mybag.scLists.filter((item) => {
        return item.checked == false;
      });

      window.localStorage.setItem("sclist", JSON.stringify(mybag.scLists));
      mybag.flager = true;
      if (mybag.scLists.length > 0) {
        mybag.shows = true;
      } else {
        mybag.shows = false;
      }
    };
    const clear = () => {
      mybag.flager = !mybag.flager;
    };
    // 全选
    const allchek = () => {
      mybag.allflag = true;

      for (var i = 0; i < mybag.scLists.length; i++) {
        mybag.scLists[i].checked = true;
      }
    };
    // 取消
    const allqux = () => {
      mybag.allflag = false;

      for (var i = 0; i < mybag.scLists.length; i++) {
        mybag.scLists[i].checked = false;
      }
    };
    onMounted(() => {
      mybag.textlist = JSON.parse(localStorage.getItem("textlist"));
      if (!window.localStorage.getItem("userInfo")) {
        window.localStorage.setItem("userInfo", JSON.stringify([]));
      } else {
        mybag.userInfo = JSON.parse(localStorage.getItem("userInfo"));
      }
      if (!window.localStorage.getItem("sclist")) {
        window.localStorage.setItem("sclist", JSON.stringify([]));
      } else {
        mybag.scLists = JSON.parse(localStorage.getItem("sclist"));
        if (mybag.scLists.length > 0) {
          mybag.shows = true;
        } else {
          mybag.shows = false;
        }
        console.log(mybag.scLists);
      }
      if (mybag.textlist.length > 0) {
        mybag.text = true;
      }
    });

    const showPopup = () => {
      mybag.show = true;
    };
    const showPopup2 = () => {
      mybag.flag = true;
    };
    const copy = () => {
      Toast("复制成功");
    };
    // const look = ()=> {
    //     codes.value = true;
    // }
    let goFeedbackInfo = (index) => {
      router.push({
        path: "/myfeedbackinfo",
        query: {
          id: index,
        },
      });
      // console.log(index);
    };
    let chat_show = (item) => {
      router.push({
        path: "/chat",
      });
      window.localStorage.setItem("userList", JSON.stringify(item));
    };
    const formatter = (type, val) => {
      if (type === "year") {
        return `${val}年`;
      } else if (type === "month") {
        return `${val}月`;
      }
      return val;
    };
    return {
      ...toRefs(mybag),
      showPopup,
      showPopup2,
      formatter,
      copy,
      chat_show,
      goFeedbackInfo,
      playCountNum,
      checked,
      chekclear,
      clear,
      allchek,
      allqux,
      look,
    };
  },
};
</script>

<template>
  <div class="container mybags">
    <!-- 我的背包 -->
    <div class="mybag" v-show="myid == 500">
      <div class="top">
        <i class="iconfont icon-zuobian" @click="$router.go(-1)"></i>
        <span>我的背包</span>
      </div>
      <div class="tabs">
        <van-tabs v-model="active">
          <van-tab title="我的背包">
            <div class="bag">
              <ul class="list">
                <li>道具名称</li>
                <li>道具数量</li>
                <li>获取时间</li>
                <li>过期时间</li>
              </ul>
            </div>
          </van-tab>
          <van-tab title="背包记录">
            <div class="baghistory">
              <div class="tops">
                <span class="exchange">交易时间</span>
                <span class="time">2022-10</span>
                <van-popup
                  v-model="show"
                  round
                  position="bottom"
                  :style="{ height: '40%' }"
                >
                  <van-datetime-picker
                    v-model="currentDate"
                    type="year-month"
                    title="选择年月"
                    :min-date="minDate"
                    :max-date="maxDate"
                    :formatter="formatter"
                  />
                </van-popup>
                <i class="iconfont icon-xiangxia1" @click="showPopup"> </i>
                <span>至</span>
                <span class="time">2022-10</span>
                <van-popup
                  v-model="flag"
                  round
                  position="bottom"
                  :style="{ height: '40%' }"
                >
                  <van-datetime-picker
                    v-model="currentDate"
                    type="year-month"
                    title="选择年月"
                    :min-date="minDate"
                    :max-date="maxDate"
                    :formatter="formatter"
                  />
                </van-popup>
                <i class="iconfont icon-xiangxia1" @click="showPopup2"></i>
              </div>
              <ul class="list">
                <li>交易时间</li>
                <li>道具名称</li>
                <li>数量</li>
                <li>获得/使用</li>
              </ul>
            </div>
          </van-tab>
          <van-tab title="实物记录">
            <div class="baghistory">
              <div class="tops">
                <span class="exchange">交易时间</span>
                <span class="time">2022-10</span>
                <van-popup
                  v-model="show"
                  round
                  position="bottom"
                  :style="{ height: '40%' }"
                >
                  <van-datetime-picker
                    v-model="currentDate"
                    type="year-month"
                    title="选择年月"
                    :min-date="minDate"
                    :max-date="maxDate"
                    :formatter="formatter"
                  />
                </van-popup>
                <i class="iconfont icon-xiangxia1" @click="showPopup"> </i>
                <span>至</span>
                <span class="time">2022-10</span>
                <van-popup
                  v-model="flag"
                  round
                  position="bottom"
                  :style="{ height: '40%' }"
                >
                  <van-datetime-picker
                    v-model="currentDate"
                    type="year-month"
                    title="选择年月"
                    :min-date="minDate"
                    :max-date="maxDate"
                    :formatter="formatter"
                  />
                </van-popup>
                <i class="iconfont icon-xiangxia1" @click="showPopup2"></i>
              </div>
              <ul class="list">
                <li>获取时间</li>
                <li>过期时间</li>
                <li>礼物名称</li>
                <li>发放状态</li>
              </ul>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>

    <!-- 消息中心 -->
    <div class="message" v-show="myid == 501">
      <div class="top">
        <i class="iconfont icon-zuobian" @click="$router.go(-1)"></i>
        <span>消息中心</span>
      </div>
      <!-- <van-empty description="暂无数据" v-if="userInfo.length == 0" /> -->
      <div class="items">
        <div class="ts">
          <i class="iconfont icon-lingdang1"></i>
        </div>
        <div class="name">系统通知</div>
      </div>
      <div
        class="items"
        v-for="(item, index) in userInfo"
        :key="index"
        @click="chat_show(item)"
      >
        <div class="ts">
          <img :src="item.anchorAvatar" alt="" />
        </div>
        <div class="name">{{ item.anchorName }}</div>
      </div>
    </div>

    <!-- 我的收藏 -->
    <div class="message" v-show="myid == 502">
      <div class="top">
        <i class="iconfont icon-zuobian" @click="$router.go(-1)"></i>
        <span>我的收藏</span>
        <div class="right" @click="clear">
          <div v-show="flager">编辑</div>
          <div v-show="!flager">取消</div>
        </div>
      </div>
      <div class="content">
        <div class="have-content">
          <div class="videos">
            <div class="video-list">
              <li v-for="item in scLists" :key="item.id">
                <div class="img" v-show="!flager" @click.stop="checked(item)">
                  <i class="iconfont icon-kegouxuan" v-show="!item.checked"></i>
                  <i
                    class="iconfont icon-gouxuancopy con"
                    v-show="item.checked"
                  ></i>
                </div>
                <img :src="item.video_icon" alt="" />
                <div class="text">
                  <div :class="['name', { con: !flager }]">
                    {{ item.title }}
                  </div>
                  <div class="acthor">up主: 123</div>
                  <div class="icon">
                    <div class="bf">
                      <i class="icon-paishipin iconfont"></i>
                      <div class="num">{{ playCountNum(item.click_num) }}</div>
                    </div>
                    <div class="pl">
                      <i class="icon-comment_light iconfont"></i>
                      <div class="num">{{ item.review_num }}</div>
                    </div>
                  </div>
                </div>
              </li>
            </div>
          </div>
        </div>
        <div class="bottom" v-show="!flager">
          <div class="all con" @click="allchek" v-show="!allflag">全选</div>
          <div class="all con" @click="allqux" v-show="allflag">取消</div>
          <div class="clear con" @click="chekclear">删除</div>
        </div>
      </div>
      <van-empty description="暂无数据" v-show="!shows" />
    </div>

    <!-- 我的反馈 -->
    <div class="feedback" v-show="myid == 503">
      <div class="tops">
        <i class="iconfont icon-zuobian" @click="$router.go(-1)"></i>
        <span class="go">我的反馈</span>
        <div class="right">
          <router-link custom to="/myfeedback" v-slot="{ href, navigate }">
            <i
              :href="href"
              @click="navigate"
              class="iconfont icon-comment_light"
            ></i
            ><span :href="href" @click="navigate">去反馈</span>
          </router-link>
        </div>
      </div>
      <van-empty v-show="text == false" description="暂无数据" />
      <ul>
        <li
          @click="goFeedbackInfo(index)"
          v-for="(item, index) in textlist"
          :key="index"
        >
          <div class="img">
            <img src="../assets/img/feed.png" alt="" />
          </div>
          <div class="right one-txt-cut">
            {{ item.text }}
          </div>
        </li>
      </ul>
    </div>

    <!-- 邀请好友 -->
    <div class="invite" v-show="myid == 504">
      <div class="top">
        <i class="iconfont icon-zuobian" @click="$router.go(-1)"></i>
        <span>邀请好友</span>
      </div>
      <div class="share">
        <div class="bg">
          <ul>
            <li>
              <p>我的邀请码</p>
              <span>Q950461</span>
              <button type="button" @click="copy">复制</button>
            </li>
            <li>
              <p>邀请链接</p>
              <span>https://promote.bsty8.com?code=Q950461</span>
              <button type="button" @click="copy">复制</button>
            </li>
            <li>
              <p>我的邀请二维码</p>
              <div class="img">
                <img
                  src=""
                  alt=""
                />
              </div>

              <button type="button" @click="look">查看</button>
              <!-- <van-dialog
                v-model:show="codes"
                title="请截屏或长按二维码保存至相册"
                show-cancel-button
              >
              </van-dialog> -->
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 监察举报 -->
    <div class="monitor" v-show="myid == 505">
      <div class="top">
        <i class="iconfont icon-zuobian" @click="$router.go(-1)"></i>
        <span>监察举报</span>
      </div>
      <div class="toreport">
        <div class="img">
          <!-- <img src="" alt=""> -->
        </div>
        <div class="jubao">
          <h2>我要举报</h2>
          <div class="go">
            <p>举报白鲨直播平台上的违规行为</p>
            <i class="iconfont icon-youbian"></i>
          </div>
        </div>
      </div>
      <div class="toreport">
        <div class="img">
          <!-- <img src="" alt=""> -->
        </div>
        <div class="jiancha">
          <h2>监察反舞弊</h2>
          <div class="go">
            <p>举报白鲨员工的违法、违规或不正直行为</p>
            <i class="iconfont icon-youbian"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<style lang="scss" scoped>
.mybags {
  .mybag {
    .top {
      height: 49px;
      padding: 5px 10px;
      background: linear-gradient(270deg, #7b0b3b 0%, #d51c78 100%);
      display: flex;
      align-items: center;
      .iconfont {
        color: #fff;
        font-size: 20px;
      }
      span {
        flex: 1;
        // text-align: center;
        padding-left: 34%;
        font-size: 18px;
        color: #fff;
      }
    }
    .tabs {
      .bag {
        margin-top: 15px;
        .list {
          display: flex;
          justify-content: space-around;
          align-items: center;
          height: 40px;
          background: #c3186c;
          li {
            font-weight: 400;
            font-size: 12px;
            color: #fff;
          }
        }
      }
      .baghistory {
        .tops {
          margin-top: 10px;
          display: flex;
          align-items: center;
          height: 60px;
          padding-left: 12px;
          font-size: 14px;
          .iconfont {
            padding: 0px 15px 0;
            color: #888888;
            font-size: 18px;
          }
          .time {
            padding-left: 12px;
            padding-top: 3px;
            color: #c3186c;
          }
          .exchange {
            margin-right: 10px;
          }
        }
        .list {
          display: flex;
          justify-content: space-around;
          align-items: center;
          height: 40px;
          background: #c3186c;
          li {
            font-weight: 400;
            font-size: 12px;
            color: #fff;
          }
        }
      }
    }
  }

  .message {
    .top {
      height: 49px;
      height: 49px;
      padding: 5px 10px;
      background: linear-gradient(270deg, #7b0b3b 0%, #d51c78 100%);
      display: flex;
      align-items: center;
      .iconfont {
        color: #fff;
        font-size: 20px;
      }
      span {
        flex: 1;
        // text-align: center;
        padding-left: 34%;
        font-size: 16px;
        color: #fff;
      }
    }
  }

  .feedback {
    .tops {
      height: 49px;
      height: 49px;
      padding: 5px 10px;
      background: linear-gradient(270deg, #7b0b3b 0%, #d51c78 100%);
      display: flex;
      align-items: center;
      .iconfont {
        color: #fff;
        font-size: 20px;
      }
      .go {
        flex: 1;
        // text-align: center;
        padding-left: 34%;
        font-size: 18px;
        color: #fff;
      }
      .right {
        display: flex;
        align-items: center;
        span {
          font-size: 16px;
          color: #fff;
          margin-left: 4px;
        }
      }
    }
    ul {
      li {
        display: flex;
        align-items: center;
        padding: 15px;
        border-bottom: 1px solid #ddd;
        .img {
          width: 44px;
          height: 44px;
          margin-right: 10px;
          img {
            width: 100%;
            width: 44px;
            height: 44px;
            border-radius: 50%;
          }
        }
      }
    }
  }

  .invite {
    .top {
      height: 49px;
      height: 49px;
      padding: 5px 10px;
      background: linear-gradient(270deg, #7b0b3b 0%, #d51c78 100%);
      display: flex;
      align-items: center;
      .iconfont {
        color: #fff;
        font-size: 20px;
      }
      span {
        flex: 1;
        // text-align: center;
        padding-left: 34%;
        font-size: 18px;
        color: #fff;
      }
    }
    .share {
      position: relative;
      margin: 15px;
      font-size: 14px;
      border: 1px solid #f2e2ff;
      height: 142px;
      background: url();
      background-repeat: no-repeat;
      .bg {
        // background-color: #faf8ff;
        ul {
          padding: 0px 15px;

          li {
            display: flex;
            align-items: center;
            padding-top: 15px;
            p {
              color: #888888;
            }
            .img {
              flex: 1;
              margin-left: 4%;
              img {
                width: 20px;
                height: 20px;
              }
            }
            span {
              margin-left: 6%;
              flex: 1;
              // width: 50%;
              overflow: hidden;
              height: 15px;
              color: #6c16bc;
              font-weight: bolder;
              font-size: 16px;
              margin-right: 12px;
            }
            button {
              // position: absolute;
              right: 15px;
              top: 11px;
              color: #6c16bc;
              border: 1px solid #b660ff;
              padding: 3px 10px;
            }
          }
        }
      }
    }
  }

  .monitor {
    .top {
      height: 49px;
      height: 49px;
      padding: 5px 10px;
      background: linear-gradient(270deg, #7b0b3b 0%, #d51c78 100%);
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      .iconfont {
        color: #fff;
        font-size: 20px;
      }
      span {
        flex: 1;
        // text-align: center;
        padding-left: 34%;
        font-size: 18px;
        color: #fff;
      }
    }
    .toreport {
      display: block;
      // width: 94vw;
      height: 120px;
      border-radius: 5px;
      padding: 19px 0 0 55px;
      position: relative;
      text-align: left;
      margin-bottom: 20px;
      margin-left: 10px;
      margin-right: 10px;
      background: linear-gradient(245deg, #ffd260 0%, #ffd850 100%);
      display: flex;
      .img {
        background: url()
          no-repeat;
        background-size: cover;
        width: 30px;
        height: 30px;
        position: absolute;
        top: 20px;
        left: 20px;
      }
      .jubao {
        padding-left: 10px;
        h2 {
          font-size: 20px;
          font-weight: 700;
          position: relative;
          z-index: 9;
        }
        .go {
          margin-top: 20px;
          position: relative;
          z-index: 9;
          font-size: 14px;
          display: flex;
          align-items: center;
        }
      }
      .jiancha {
        padding-left: 10px;
        h2 {
          font-size: 20px;
          font-weight: 700;
          position: relative;
          z-index: 9;
        }
        .go {
          margin-top: 20px;
          position: relative;
          z-index: 9;
          font-size: 14px;
          display: flex;
          align-items: center;
        }
      }
    }
  }

  .change {
    .top {
      height: 49px;
      height: 49px;
      padding: 5px 10px;
      background: linear-gradient(270deg, #8e4ff5 0%, #7172f7 100%);
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      .iconfont {
        color: #fff;
        font-size: 20px;
      }
      span {
        flex: 1;
        // text-align: center;
        padding-left: 33%;
        font-size: 18px;
        color: #fff;
      }
    }
    .info {
      padding: 15px;
      border-bottom: 1px solid #ddd;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      font-size: 18px;

      .right {
        color: #9d9fa0;
        span {
          margin-right: 4px;
        }
      }
    }
  }
}

::v-deep .van-tabs__line {
  background: linear-gradient(270deg, #7b0b3b 0%, #d51c78 100%);
  height: 3px;
  border-radius: 2px;
}

::v-deep .van-dialog__content {
  text-align: center;
  img {
    width: 250px;
    height: 250px;
    margin-left: 35px;
  }
}
.items {
  display: flex;
  padding: 15px 12px;
  background: #fff;
  align-items: center;
  .ts {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #80a5f5;
    line-height: 50px;
    text-align: center;
    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
    .iconfont {
      font-size: 25px;
      color: #fff;
    }
  }
  .name {
    font-size: 16px;
    color: #1b1b1b;
    font-weight: bold;
    margin-left: 10px;
  }
}
// 底部
.bottom {
  height: 50px;
  line-height: 50px;
  text-align: center;
  width: 100%;
  position: fixed;
  bottom: 0;
  background: #fff;
  display: flex;
  color: #bababa;
  .con {
    color: #373737;
  }
  .all {
    width: 50%;
  }
  .clear {
    width: 50%;
  }
}
.videos {
  margin-top: 5px;
  .video-list {
    margin: 5px 0 0;

    li {
      .con {
        color: red;
      }
      .iconfont {
        margin-right: 4px;
      }
      align-items: center;
      margin-bottom: 10px;
      border-radius: 8px;
      display: flex;
      background: #fff;
      padding: 10px 5px 10px 5px;
      img {
        width: 108px;
        height: 62px;
        border-radius: 8px;
      }
      .text {
        margin-left: 10px;

        .name {
          width: 240px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          color: #1b1b1b;
          font-weight: bold;
          font-size: 14px;
          margin-bottom: 6px;
        }
        .con {
          width: 192px;
        }
        .acthor {
          font-size: 12px;
          color: #ababab;
          margin-bottom: 8px;
        }
        .icon {
          display: flex;
          font-size: 12px;
          color: #c4c4c4;
          .iconfont {
            margin-right: 4px;
          }
          .bf {
            display: flex;
            margin-right: 16px;
            align-items: center;
          }
          .pl {
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }
}
.right {
  color: #000;
  font-size: 14px;
}
</style>